<template>
  <div class="myAddress">
      <x-header title="收货地址" :left-options="{backText:''}" class='whiteHeader'>
      </x-header>
      <div class="allAdress">
        <div class="addressList" v-for="item in allAddress">
          <div class="allMess border-bottom">
            
            <div class="addressMess">
                <p>
                {{item.CONTACT}} <span>{{item.PHONE}}</span>
              </p>
              <h2>{{item.PROVINCE}}{{item.CITY}}{{item.RANGE}}{{item.ADDRESS}}</h2>
            </div>
          </div>
          <div class="operate">
              <div class="select" @click="selectAddress(item.ADR_ID)" :class="{'on':item.ADR_ID==selectId}"></div><em :class="{'active':item.ADR_ID==selectId}">设为默认</em>
            <span @click="deleteAddress(item.ADR_ID)" class="delete">
            </span>
            <span @click="editAddress(item)" class="edit">
            </span>
          </div>
        </div>
        
      </div>
      <div class="noData" v-if='allAddress.length==0'>
        <img src="../../assets/image/address/noAddress.png" alt="" />
        <p>你暂无收货地址，请添加</p>
      </div>
      <a class="addAddress" href="javascript:;" @click='addAddress'>
         <img src="../../assets/image/address/add.png">
        新增地址
      </a>
  </div>
</template>
<script>
/*我的收货地址*/
import { Checklist,MessageBox} from 'mint-ui';
import {XHeader} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"myAddress",
  // 数据
  data(){

    return{
      selectId:"",//选中的地址
      userId:"",
      allAddress:""   //用户所有地址
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    //请求实例
    //获取用户添加的所有地址
    this.$fetchPost('/UserAdrWeb/getUserAdrList.action',{USER_ID:this.userId}).then(res=>{
        if(res.STATUS_CODE==1){
          this.allAddress=res.RESULT_DATA;
          for(let i=0;i<this.allAddress.length;i++){
            if(this.allAddress[i].IS_DEFAULT==1){
              this.selectId=this.allAddress[i].ADR_ID;
            }
          }
        }
      },err=>{
        console.log(err);
      })
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    //返回
      returnLink(){
        this.$router.go(-1);
      },
      // 选择地址(设置默认地址)
      selectAddress(id){
        this.$fetchPost('/UserAdrWeb/setDefaultAdr.action',{USER_ID:this.userId,ADR_ID:id}).then(res=>{
          if(res.STATUS_CODE==1){
            this.selectId=id;
          }
        },err=>{
          console.log(err);
        })
      },

      //删除地址
      deleteAddress(id){
        let that=this;
         this.$vux.confirm.show({
            title:'提示',
            content:'你真的要删除该地址吗',
            onConfirm (val) {
              that.$fetchPost('/UserAdrWeb/deleteUserAdr.action',{USER_ID:that.userId,ADR_ID:id}).then(function(res){
                if(res.STATUS_CODE==1){
                  that.allAddress=that.allAddress.filter(function(item){
                    return item.ADR_ID!=id;
                  })
                }
              })
            },
            onShow(){
            }
          })
      },
      //编辑地址
      editAddress(item){
        localStorage.setItem("addressMess",JSON.stringify(item))
        this.$router.push("/updateAddress")
      },
      addAddress(){
        localStorage.removeItem("addressMess")
        this.$router.push("/updateAddress")
      }
  },
  // 子组件
  components:{
    XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.myAddress{
  width: 7.5rem;
  padding-bottom: 0.7rem;
  min-height: 100%;
  background: #efeff4;
  .commentHeader{
    background: #fff;
    color: #000;
    border-bottom: 1px solid #d9d9d9;
    font-size: 0.361111rem;
  }
  .allAdress{
    .addressList{
      background: #fff;
      margin-bottom: 0.2rem;
      text-align: left;
      .border-bottom{
          position: relative;
          border-top: none !important;
      }
      .border-bottom::after {
          content: " ";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1px;
          background-color: #e0e0e0;
          -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
      }
      .allMess{
        display: flex;
        /* border-bottom: 1px solid #e1e1e1; */
        padding:0.15rem;
        .addressMess{
          padding: 0 0 0 0.2rem;
          width: 100%;
          h2{
            font-size: 0.24rem;
            margin: 0.1rem 0;
            color: #666;
            margin-bottom: 0.2rem;
          }
          p{
            font-size: 0.26rem;
            font-weight: bold;
            color: #222;
            margin: 0.1rem 0 0.277778rem 0;
            span{
              float: right;
              padding-right: 0.3rem;
            }
          }
          
        }
      }
      .operate{
        height: 0.8rem;
        padding:0rem 0.2rem;
        .select{
          width: 0.42rem;
          height:0.4rem;
          margin-top: 0.2rem;
          float: left;
          padding: 0.15rem;
          background: url(../../assets/image/address/noChecked.png) center center no-repeat;
          background-size: 0.39rem 0.4rem;
        }
        .on{
          background: url(../../assets/image/address/checked.png) center center no-repeat;
          background-size: 0.39rem 0.4rem;
        }
        em{
          font-size: 0.277778rem;
          color: #686868;
          font-style: normal;
          line-height: 0.85rem;
          float: left;
          padding-left: 0.1rem;
        }
        .active{
          color: #ec2121;
        }
        span{
          float: right;
          font-size: 0.25rem;
          margin-top: 0.23rem;
          margin-right: 0.2rem;
          display: inline-block;
          width:0.4rem;
          height: 0.4rem;
          color: #686868;
        }
        .edit{
          background: url(../../assets/image/address/edit.png) no-repeat;
          background-size: 0.32rem 0.32rem;
          margin-right: 0.42rem;
        }
        .delete{
          background: url(../../assets/image/address/delete.png) no-repeat;
          background-size: 0.32rem 0.32rem;
        }
      }
    }
    
  }
  .noData{
        position: absolute;
        top: 50%;
        left: 50%;
        text-align: center;
        transform: translate(-50%,-60%);
        img{
          width: 1.53rem;
          height: 1.6rem;
        }
        p{
          font-size: 0.22rem;
          color: #ccc;
        }
    }
  .addAddress{
    position:fixed;
    bottom:0;
    width: 100%;
    display: block;
    height:0.9rem;
    line-height: 0.9rem;
    font-size: 0.305556rem;
    text-align: center;
    background: #ec2121;
    color: #fff;
    display: flex;
    align-items:center;
    justify-content:center;
    img{
      width: 0.31rem;
      height: 0.31rem;
      margin-right: 0.1rem;
    }
  }
}
</style>